<template>
  <view class="wrap">
    <view class="header">
      <image :src="hintFrom" mode="widthFix" class="img"></image>
    </view>
    <z-paging ref="paging">
      <template #top>
        <uv-navbar title="" autoBack placeholder bgColor="rgba(0,0,0,0)" left-icon-color="#000"></uv-navbar>
      </template>
      <view class="box">
        <view class="title pb50">选择注销原因（必填）</view>
        <view class="list">
          <view class="item" v-for="(item,index) in radioList" :key="index" @click="opt.option = item.id">
            <view class="icon">
              <image src="../../../static/radio-on.png" class="img" v-if="opt.option == item.id"></image>
              <image src="../../../static/checkoff.png" class="img" v-else></image>
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
          <view class="input">
            <uv-textarea v-model="opt.content" placeholder="请详细的描述原因，以便我们更好的提供服务~" height="200rpx" border='surround' :customStyle="{borderRadius: '12rpx'}" :textStyle="{fontSize: '24rpx', color: '#333'}" placeholderStyle='font-size: 24rpx; color: rgba($color: #000, $alpha: .2)'></uv-textarea>
          </view>
        </view>
        <view class="title pb30">添加图片证据（选填）</view>
        <view class="upload" @click="chooseImage">
          <view class="nowImage" v-if="opt.images">
            <image :src="setUrl(opt.images)" mode="aspectFill" class="img"></image>
          </view>
          <image src="../../../static/hintFromImage.png" class="img" v-else></image>
        </view>
        <view class="title pb30">联系方式（必填）</view>
        <view class="testList">
          <view class="test">
            <uv-input v-model="opt.name" placeholder="请填写您的姓名" border="surround" fontSize='26rpx' color='#333' placeholderStyle='font-size: 26rpx;color: rgba($color: #000, $alpha: .46)' :customStyle="{borderRadius: '12rpx'}"></uv-input>
          </view>
          <view class="test">
            <uv-input v-model="opt.phone" placeholder="请填写您的电话和邮箱" border="surround" fontSize='26rpx' color='#333' placeholderStyle='font-size: 26rpx;color: rgba($color: #000, $alpha: .46)' :customStyle="{borderRadius: '12rpx'}"></uv-input>
          </view>
        </view>
        <view class="footer">
          <button class="btn" hover-class="none" @click="keyUp">提交</button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </z-paging>
    
    <uv-modal ref="modals" title="提示" content='是否确认注销' showCancelButton :closeOnClickOverlay="false" confirmColor='#E43222' @confirm="pickConfirm" @cancel='cancel'></uv-modal>
    
    <action ref="actionPhoto" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import hintFrom from "@/static/hintFrom.png"
import { ref } from "vue";
import { toast, choose, setUrl } from '@/common';
import { post } from '@/api';
import { useUser } from '@/store';

const modal = ref(null);
const actionPhoto = ref(null);

const radioList = ref([
  {name: '有多个账号/想注册并使用新账号', id: 1},
  {name: '不想用投研宝了', id: 2},
  {name: '其他原因', id: 3}
])
let opt = ref({
  option: 1,
  content: '',
  images: '',
  name: '',
  phone: ''
})

function keyUp(){
  const value = opt.value;
  if(value.option == 3){
    if(!value.content) return toast('请输入注销原因')
  }
  if(!value.name) return toast('请输入联系人');
  if(!value.phone) return toast('请输入联系方式');
  
  modals.value.open();
}
function pickConfirm(){
  const value = opt.value;
  let params = {
    option: value.option,
    content: '',
    images: value.images,
    name: value.name,
    phone: value.phone
  }
  if(value.option != 3){
    params.content = radioList.value[value.option - 1].name;
  }else{
    params.content = value.content;
  }
  console.log(params);
  post('api/user/logoff', params).then(res => {
    if(res.code == 1){
      modals.value.close();
      uni.removeStorageSync('token');
      uni.removeStorageSync('userInfo');
      useUser().setToken('');
      useUser().setUserInfo('');
      toast('注销成功');
      setTimeout(() => {
        uni.reLaunch({
        	url: '/pages/index/index'
        });
      }, 1000)
    }
  })
}

function chooseImage(){
  
  actionPhoto.value.open();
}
function getImageUrl(url){
  opt.value.images = url;
}
function cancel(){
  modals.value.close();
}
function back(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .box{
    padding: 0 50rpx;
    padding-top: 100rpx;
    width: 100%;
    position: relative;
    z-index: 2;
    .footer{
      padding: 50rpx 0;
    }
    .testList{
      .test{
        padding-bottom: 30rpx;
        &:last-child{
          padding-bottom: 0;
        }
      }
    }
    .upload{
      width: 337rpx;
      height: 216rpx;
      font-size: 0;
      margin-bottom: 52rpx;
      .nowImage{
        width: 337rpx;
        height: 216rpx;
        font-size: 0;
        border-radius: 12rpx;
        overflow: hidden;
      }
    }
    .list{
      .item{
        margin-bottom: 50rpx;
        display: flex;
        align-items: center;
        .icon{
          width: 22rpx;
          height: 22rpx;
          font-size: 0;
        }
        .name{
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          padding-left: 24rpx;
        }
      }
    }
    .title{
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      padding-top: 50rpx;
      &.pb30{
        padding-bottom: 30rpx;
      }
      &.pb50{
        padding-bottom: 50rpx;
      }
    }
  }
  .back{
    padding-top: 25rpx;
    padding-left: 32rpx;
    .call{
      display: inline-block;
    }
  }
  .header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
  }
</style>